<template>
	<view class="flex-col justify-start page">
		<view class="flex-col justify-start section">
			<view class="flex-col section_2">
				<view class="flex-col justify-start relative group">
					<view class="flex-col justify-start items-center image-wrapper">
						<image class="image_4"
							src="https://ide.code.fun/api/image?token=65f3a143731c750011ffb0a4&name=0d74e9ef761c0f66377770ce3074f632.png" />
					</view>
					<view class="fixed" @click="tomy">
						<image
							src="https://maofengshuzinongye.oss-cn-chengdu.aliyuncs.com/%E5%89%8D%E7%AB%AF%E5%9B%BE%E7%89%87/%E6%88%91%E7%9A%84%E8%AE%A4%E5%85%BB%E9%A1%B53_slices/%E5%9B%BE%E5%B1%82%200%20%E6%8B%B7%E8%B4%9D%403x.png"
							mode="aspectFill" style="width: 90rpx;height: 108rpx;margin-bottom: 30rpx;"></image>
						<view class="self-end font_2 text_2 text_3 mt-4-5" style="margin-bottom: 20rpx;">{{titleKey}}清单</view>
					</view>
					<view class="flex-col section_3 pos">
						<view class="flex-row justify-center items-center relative group_2">
							<image class="image pos_2"
								src="https://ide.code.fun/api/image?token=65f3a143731c750011ffb0a4&name=5e14f56afd2fc2eb8a039ce672bcb48e.png" />
							<text class="font text">我的{{titleKey}}</text>
						</view>
						<view class="flex-col group_3">
							<view class="flex-col group_4">
								<view class="flex-col justify-start items-end self-stretch relative group_5">
									<image class="image_3"
										src="https://ide.code.fun/api/image?token=65f3a143731c750011ffb0a4&name=f7ee7be6e48f6639cac8a365e322f30a.png" />
									<image @click="qiandao" class="image_2 pos_3"
										src="https://maofengshuzinongye.oss-cn-chengdu.aliyuncs.com/%E5%89%8D%E7%AB%AF%E5%9B%BE%E7%89%87/%E6%88%91%E7%9A%84%E8%AE%A4%E5%85%BB%E9%A1%B53_slices/%E7%BB%84%206%403x.png" />
								</view>
								<text class="self-end font_2 text_2 text_3 mt-4-5">每日签到</text>
							</view>
							<view class="mt-14 flex-row justify-between postion">
								<view class="signIn" :class="{'active':activeSignIn}">
									<image class="mifenPic" src="@/static/mifen.png" mode="aspectFill"></image>
									<view class="">
										+1
									</view>
								</view>
								<view class="flex-row self-start group_7">
									<image class="self-start image_7"
										src="https://maofengshuzinongye.oss-cn-chengdu.aliyuncs.com/%E5%89%8D%E7%AB%AF%E5%9B%BE%E7%89%87/%E6%88%91%E7%9A%84%E8%AE%A4%E5%85%BB%E9%A1%B53_slices/%E5%9B%BE%E5%B1%82%200%20%E6%8B%B7%E8%B4%9D%403x.png" />
									<view class="flex-col justify-start items-center relative group_8 ml-9-5">
										<image class="image_10" style="z-index: 1;"
											src="https://ide.code.fun/api/image?token=65f3a143731c750011ffb0a4&name=a6a61d9fff20603c4b6b3ef965060b66.png" />
										<image class="image_8 pos_5" @click="goList" style="position: relative;top: -80%;z-index: 9999;"
											src="https://maofengshuzinongye.oss-cn-chengdu.aliyuncs.com/%E5%89%8D%E7%AB%AF%E5%9B%BE%E7%89%87/%E6%88%91%E7%9A%84%E8%AE%A4%E5%85%BB%E9%A1%B53_slices/%E7%BB%84%2015%403x%281%29.png" />
										<view class="flex-col justify-start items-center section_4 pos_4"
											style="top: -20rpx;text-align: center;">
											<view class="group_9"
												style="background-color: rgba(0, 0, 0, 0.2); border-radius: 20rpx;margin-bottom: 50rpx;padding: 10rpx;width: 320rpx;"
												v-if="mood">
												<text class="font_3">
													{{mood.fosterProduct.name}}
													<br />
												</text>
												<text class="font_3">{{mood.fosterProduct.number}}号</text>
											</view>
											<view class="self-center font_2 text_2"
												style="margin-top: 200rpx;font-size: 35rpx;" @click="xuefei"
												v-if="mood">饲料充值</view>
											<view class="self-center font_2 text_2"
												style="margin-top: 320rpx;font-size: 35rpx;" @click="goList" v-else>{{titleKey}}蜂箱
											</view>
										</view>
									</view>
								</view>
								<view class="flex-col group_6" v-if="mood">
									<image @click="fangan" class="shrink-0 self-start image_5 image_6"
										src="https://maofengshuzinongye.oss-cn-chengdu.aliyuncs.com/%E5%89%8D%E7%AB%AF%E5%9B%BE%E7%89%87/%E6%88%91%E7%9A%84%E8%AE%A4%E5%85%BB%E9%A1%B53_slices/%E8%BD%AC%E8%B5%A0%403x.png" />
									<text class="self-center font_2 text_2">{{fananName}}</text>
									<image @click="fenxiang" class="shrink-0 self-center image_5 image_9"
										src="@/static/5345.png" />
									<text class="self-center font_2 text_2">预约分箱</text>
									<view class="flex-col justify-start items-center self-stretch relative group_10">
										<image @click="jilv" class="image_11"
											src="https://maofengshuzinongye.oss-cn-chengdu.aliyuncs.com/%E5%89%8D%E7%AB%AF%E5%9B%BE%E7%89%87/%E6%88%91%E7%9A%84%E8%AE%A4%E5%85%BB%E9%A1%B53_slices/%E7%BB%84%2015%403x.png" />
										<text class="font_2 text_2 pos_6">饲养记录</text>
									</view>
								</view>
								<view class="" v-else style="height: 450rpx;">

								</view>
							</view>
						</view>
						<view class="flex-row justify-between group_11">
							<text class="font text_4">监控消息</text>
							<view class="flex-row items-center section_5">
								<!-- <text class="font_3 text_5" @click="tomroe">更多</text> -->
								<u-icon name="arrow-right-double"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="flex-col relative section_6">
					<image class="shrink-0 self-start image_12"
						src="https://maofengshuzinongye.oss-cn-chengdu.aliyuncs.com/%E5%89%8D%E7%AB%AF%E5%9B%BE%E7%89%87/%E6%88%91%E7%9A%84%E8%AE%A4%E5%85%BB%E9%A1%B53_slices/%E7%9B%91%E6%8E%A7.png" />
					<view class="equal-division section_7">
						<view class="flex-col items-center group_12 equal-division-item" >
							<view class="" style="width: 650rpx;display: flex;justify-content: space-between;margin-left: 350rpx;"  v-if="mood">
								<view class="image_14" style="position: relative;"   v-for="(item,i) in mood.slideshowImgList.slice(0,2)" >
									<image class="image_14" :src="item.imgUrl"
										style="position: absolute;z-index: 1;"/>
									<view class="videoimg" >
										<u-icon name="play-circle"  @click="tovideo" style="z-index: 999;position: absolute;"  color="#fff" size="34"></u-icon>
									</view>
								</view>
							</view>
							<view class="" style="text-align: center;display: flex;justify-content: center;" v-else>
								<image  src="http://cdn.uviewui.com/uview/empty/list.png" mode="aspectFill"
									style="width: 200rpx;height: 200rpx;margin-left: 300rpx;"></image>
							</view>
							<view class="" style="width: 650rpx;display: flex;justify-content: space-between;margin-left: 350rpx;">
								<view class="" style="width: 313rpx;text-align: center;" v-for="(item,i) in mood.slideshowImgList.slice(0,2)">
									<text class="font_4 text_6">{{item.id}}</text>
								</view>
							</view>
							<view class="section_8 pos_7"></view>
						</view>
					</view>
				
				</view>
			</view>
		</view>
		<u-overlay :show="showvoler" @click="showvoler = false">
			<view class="pupBig">
				<view class="pup_box" @tap.stop>

				</view>
			</view>
		</u-overlay>
		<u-popup :show="Show" mode="bottom" :round="10" @close="siliao" closeable>
			<view class="rijititle">饲料记录</view>
			<scroll-view style="height: 60vh;" scroll-y="true">
				<view class="" v-if="msg.length>0">
					<view class="riji_item" v-for="(item,i) in  msg">
						<view class="riji_itemName">{{varietyName}}</view>
						<view class="riji_time">{{item.createTime}}</view>
						<view class="riji_flx" v-if="item.imgId" @click="img(item.imgId)">
							<image :src="item.imgId" class="riji_img" mode="aspectFill"></image>
						</view>
						<view class="riji_text">
							<text>{{item.content}}</text>
						</view>
					</view>
				</view>
				<view class="" v-else style="margin-top: 30rpx;">
					<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
					</u-empty>
				</view>
			</scroll-view>
		</u-popup>



		<u-popup :show="xueShow" mode="bottom" :round="10" @close="xuefei" closeable>
			<view style="height: 480rpx;">
				<view style="text-align: center;padding-top: 40rpx;font-weight: 600;font-size: 35rpx;">饲料充值</view>
				<view class="right1" v-if="mood.adoptSurplusMonth>0">
					饲料充足余{{mood.adoptSurplusMonth}}月
				</view>
				<view class="right1" v-else-if="mood.adoptSurplusMonth==0">
					饲料费已不足
				</view>
				<view class="right1" v-else-if="mood.adoptSurplusMonth<0">
					饲料费逾期{{mood.adoptSurplusMonth}}月
				</view>
				<view class="number_box">
					<view class="number_boxflx">
						<view class="" style="font-size:30rpx;">购买月数（{{mood.fosterProduct.rearMonthMoney}}元/月）</view>
						<u-number-box v-model="number" @change="valChange" :color1="'#fff'" :input-width="40"
							:input-height="40" :bgColor1="'#21B070'" :min='3'></u-number-box>
					</view>
				</view>
				<view class="buyBtn" style="margin: 0 auto;margin-top: 15rpx;" @click="buyxue">续费充值</view>
			</view>
		</u-popup>
		
		<u-picker :show="openShow" :columns="fananList" keyName="label" @confirm='fananConfirm'
			@cancel='openShow=false'></u-picker>
		
	</view>
</template>

<script>
	import Header from '@/components/header/header.vue'
	export default {
		props: {
			isBack: {
				typeof: String,
				default: 'arrow-left',
			},
		},
		data() {
			return {
				background: {
					backgroundColor: '#21B070'
				},
				orderList: [],
				mood: null,
				number: 12,
				current: 0,
				swiperCurrent: 0,
				id: '',
				status: 'loadmore',
				iconType: 'flower',
				msg: '',
				pageNum: 1,
				total: 0,
				pageSize: 10,
				showvoler: false,
				Show: false,
				activeSignIn: false,
				xueShow: false,
				yueyueID:'',
				titleKey:uni.getStorageSync('titleKey'),
				openShow: false,
				fananName: '方案A',
				fananList: [
					[{
						label: '方案A',
						id: 0
					}, {
						label: '方案B',
						id: 1
					}, {
						label: '方案C',
						id: 2
					}]
				],
				scheme: 0
			};
		},
		onLoad(e) {

		},
		created() {
			this.getOrderList();
		},
		components: {
			Header
		},
		computed: {},

		methods: {
			fangan() {
				this.openShow = true
			},
		async	fananConfirm(e) {
				this.fananName = e.value[0].label
				this.scheme = e.value[0].id
				//模式切换
				let res = await this.$api.request('farmer/foster/schemeUpdate', 'get', {
					id: this.id,
					scheme:this.scheme
				})
					if (res.code == '200') {
						uni.showToast({
							title:'切换成功',
							icon:'none'
						})
					}
				this.openShow = false
			},
			siliao(){
				this.Show=!this.Show
			},
			xuefei(){
				this.xueShow=!this.xueShow
			},
			async buyxue() {
				//续费充值
				let res = await this.$api.request('admin/renewOrder/client', 'post', {
					totalNum: this.number,
					totalPrice: this.number * this.mood.feedCost,
					fosterId: this.id
				})
				if (res.code == '200') {
					let mood = res.data.resExt.payOrder
					uni.requestPayment({
						provider: 'wxpay', // 服务提提供商
						timeStamp: mood.timeStamp, // 时间戳
						nonceStr: mood.nonceStr, // 随机字符串
						package: mood.attach,
						signType: mood.signType, // 签名算法
						paySign: mood.paySign, // 签名
						success: function(res) {
							uni.navigateTo({
								url: '/pages/index/success?cont=2'
							})
						},
						fail: function(err) {
							console.log('支付失败', err);
						}
					});
				}

			},
			valChange(e) {

			},
			goList() {
				if(!this.mood & this.titleKey){
					uni.navigateTo({
						url: '/pages/index/adopt/adoptAll'
					})
				}
			},
			tovideo() {
				console.log(this.mood)
				uni.navigateTo({
					url: '/pages/my/adopt/adoptVideo/adoptVideo?url='+this.mood.liveStreaming[0]
				})
			},
			async qiandao() {
				//每日签到
				let res = await this.$api.request('manage/user/signIn/save')
				if (res.code == 200) {
					this.activeSignIn = true
					setTimeout(() => {
						this.activeSignIn = false
					}, 2000)
					uni.showToast({
						title: '签到成功',
						icon: 'none'
					})

				}
			},
			// 页面数据
			async getOrderList() {
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				//获取我的认养列表
				let res = await this.$api.request('farmer/user/adopt/myList', 'get', params)
				if (res.data.list) {
					this.cread(res.data.list[0].id)
					this.id = res.data.list[0].id
				}
			},
			// 页面数据
			async cread(e) {
				//认养详情
				let res = await this.$api.request('farmer/user/adopt/detail/' + e)
				this.mood = res.data
				this.yueyueID = res.data.fosterProduct.id
			},
			//饲养记录
			async jilv() {
				let res = await this.$api.request('manage/fosterRecord/list', 'get', {
					id: this.id,
					pageNum: this.pageNum,
				})
				this.msg = res.data.list
				this.Show = true
			},
			//分箱
			async fenxiang() {
				let res = await this.$api.request('farmer/foster/split/box/' + this.yueyueID)
				if (res.code == 200) {
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
				}
			},
			//认养清单
			tomy() {
				uni.navigateTo({
					url: '/pages/my/adopt/adoptList'
				})
			},
			//监控列表
			tomroe() {
				uni.navigateTo({
					url: ''
				})
			},

		}
	};
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		/* background-color: #f2f2f2; */
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	.buyBtn {
		height: 98rpx;
		border-radius: 100rpx;
		width: 80%;
		background: linear-gradient(-49deg, #FE471E, #D40101);
		color: #fff;
		font-size: 36rpx;
		text-align: center;
		line-height: 98rpx;
		font-weight: bold;
	}

	.right1 {
		font-size: 28rpx;
		color: #FE471E;
		margin-left: 50rpx;
		margin-top: 30rpx;
	}

	.number_boxflx {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.number_box {
		width: 680rpx;
		background-color: #fff;
		margin: 20rpx;
		border-radius: 10rpx;
		padding: 20rpx;
	}

	.btn {
		width: 173rpx;
		height: 56rpx;
		background: #FF0000;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 56rpx;
		border-radius: 28rpx;
		margin-top: 330rpx;
	}

	.videoimg {
		width: 313rpx;
		height: 184rpx;
		background-color: rgba(0, 0, 0, 0.2);
		position: absolute;
		border-radius: 8rpx;
		z-index: 2;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.riji_text {
		margin-top: 10rpx;
		font-size: 28rpx;
	}

	.riji_flx {
		display: flex;
		justify-content: space-between;
	}

	.riji_img {
		width: 180rpx;
		height: 180rpx;
		border-radius: 15rpx;
	}

	.riji_time {
		color: #999999;
		margin-bottom: 10rpx;
		font-size: 26rpx;
	}

	.riji_itemName {
		margin-bottom: 10rpx;
		font-size: 28rpx;
		font-weight: 600;
	}

	.riji_item {
		padding: 40rpx;
		border-bottom: 1rpx solid #DADADA;
	}

	.rijititle {
		text-align: center;
		padding-top: 40rpx;
		font-weight: 600;
		font-size: 35rpx;
	}

	.riji_box {
		position: fixed;
		top: 60%;
		right: 2%;
	}

	.fixed {
		width: 219rpx;
		height: 64rpx;
		text-align: center;
		border-radius: 30rpx 0 0 30rpx;
		background-color: #FDF7EF;
		text-align: center;
		line-height: 64rpx;
		position: fixed;
		right: 0;
		top: 20%;
		z-index: 9999;
		display: flex;
		align-items: center;
	}

	.pupBig {
		width: 100%;
		height: 100%;
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.pup_box {
		width: 596rpx;
		height: 816rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.mt-4-5 {
		margin-top: 9rpx;
	}

	.ml-9-5 {
		margin-left: 19rpx;
	}

	.ml-2-5 {
		margin-left: 5rpx;
	}

	.mt-9-5 {
		margin-top: 19rpx;
	}

	.page {
		background-color: #ffffff;
		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.section {
		background-color: #f6feef;
	}

	.section_2 {
		padding-bottom: 50rpx;
		background-color: #ffffff00;
		height: 1593rpx;
	}

	.group {
		padding-top: 620rpx;
	}

	.image-wrapper {
		background-image: url('https://ide.code.fun/api/image?token=65f3a143731c750011ffb0a4&name=09c317052b289875221fb93005874de8.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.image_4 {
		width: 100vw;
		height: 102.4vw;
	}

	.section_3 {
		padding: 66rpx 15rpx 130rpx 26rpx;
		background-image: url('https://maofengshuzinongye.oss-cn-chengdu.aliyuncs.com/%E5%89%8D%E7%AB%AF%E5%9B%BE%E7%89%87/%E6%88%91%E7%9A%84%E8%AE%A4%E5%85%BB%E9%A1%B53_slices/%E7%9F%A9%E5%BD%A2%2010%EF%BC%88%E5%90%88%E5%B9%B6%EF%BC%89%403x.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.pos {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
	}

	.group_2 {
		padding: 4rpx 0;
	}

	.image {
		width: 26rpx;
		height: 44rpx;
	}

	.pos_2 {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.font {
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		line-height: 36rpx;
	}

	.text {
		color: #000000;
		font-weight: 500;
		line-height: 35rpx;
	}

	.group_3 {
		margin-top: 394rpx;
	}

	.group_4 {
		padding: 0 10rpx;
	}

	.group_5 {
		padding-top: 9rpx;
	}

	.image_3 {
		margin-right: 9rpx;
		filter: drop-shadow(0rpx 3rpx 7rpx #521b0359);
		width: 98rpx;
		height: 98rpx;
	}

	.image_2 {
		width: 92rpx;
		height: 103rpx;
	}

	.pos_3 {
		position: absolute;
		right: 12rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.font_2 {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		line-height: 27rpx;
		font-weight: 700;
		color: #ffffff;
	}

	.text_2 {
		text-shadow: 0 4rpx #2d1502, 0 -4rpx #2d1502, 4rpx 0 #2d1502, -4rpx 0 #2d1502;
	}

	.text_3 {
		line-height: 28rpx;
	}

	.group_7 {
		margin-top: 11rpx;
	}

	.image_7 {
		margin-top: 27rpx;
		width: 204rpx;
		height: 255rpx;
	}

	.group_8 {
		padding-top: 241rpx;
		width: 215rpx;
	}

	.image_10 {
		width: 215rpx;
		height: 103rpx;
	}

	.image_8 {
		width: 199rpx;
		height: 246rpx;
	}

	.pos_5 {
		position: absolute;
		left: 9rpx;
		right: 7rpx;
		bottom: 23rpx;
	}

	.section_4 {
		padding: 6rpx 0 25rpx;
		background-image: url('https://ide.code.fun/api/image?token=65f3a143731c750011ffb0a4&name=66c1d3c504d4f8f6ce447cbf2f9dd230.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 178rpx;
	}

	.pos_4 {
		position: absolute;
		left: 11rpx;
		top: 0;
	}

	.group_9 {
		line-height: 36rpx;
	}

	.font_3 {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		line-height: 36rpx;
		color: #ffffff;
	}

	.group_6 {
		margin-right: 8rpx;
		width: 114rpx;
	}

	.image_5 {
		width: 98rpx;
		height: 98rpx;
	}

	.image_6 {
		margin-left: 3rpx;
	}

	.image_9 {
		margin-top: 38rpx;
	}

	.group_10 {
		margin-top: 32rpx;
		padding-bottom: 5rpx;
	}

	.image_11 {
		width: 100rpx;
		height: 113rpx;
	}

	.pos_6 {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.group_11 {
		margin-top: 88rpx;
		padding-left: 109rpx;
	}

	.text_4 {
		color: #ff7e00;
		font-weight: 800;
		text-shadow: 0rpx 7rpx 6rpx #5b1605, 0 6rpx #ffffff, 0 -6rpx #ffffff, 6rpx 0 #ffffff, -6rpx 0 #ffffff;
	}

	.section_5 {
		padding: 6rpx 15rpx 9rpx;
		background-color: #ffffff80;
		border-radius: 20rpx;
		height: 40rpx;
		border-left: solid 1rpx #ffffff;
		border-right: solid 1rpx #ffffff;
		border-top: solid 1rpx #ffffff;
		border-bottom: solid 1rpx #ffffff;
	}

	.text_5 {
		color: #333333;
		line-height: 23rpx;
	}

	.image_13 {
		width: 10rpx;
		height: 16rpx;
	}

	.section_6 {
		margin: -137rpx 14rpx 0;
		padding: 0 7rpx 11rpx;
		background-color: #fc8008;
		border-radius: 20rpx;
		height: 292rpx;
	}

	.image_12 {
		margin-top: -72rpx;
		filter: drop-shadow(0rpx 3rpx 7.2rpx #5b160559);
		width: 95rpx;
		height: 87rpx;
	}

	.equal-division {
		position: relative;
		align-self: stretch;
		margin: 0 3rpx;
	}

	.section_7 {
		background-color: #fdf7ef;
		box-shadow: 0rpx 3rpx 7.2rpx 0.8rpx #5b160559;
		border-radius: 18rpx;
		height: 271rpx;
	}

	.group_12 {
		position: absolute;
		left: 12.5rpx;
		top: 10rpx;
	}

	.image_14 {
		border-radius: 8rpx;
		width: 313rpx;
		height: 184rpx;
	}

	.font_4 {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		line-height: 27rpx;
		font-weight: 500;
		color: #330000;
	}

	.text_6 {
		margin-top: 19rpx;
	}

	.section_8 {
		background-color: #fdf7ef;
		width: 22rpx;
		height: 32rpx;
	}

	.pos_7 {
		position: absolute;
		right: 86.5rpx;
		top: 220rpx;
	}

	.group_13 {
		position: absolute;
		right: 14.5rpx;
		top: 10rpx;
	}

	.equal-division-item {
		padding: 10rpx 0 20rpx;
		width: 337rpx;
	}

	.postion {
		position: relative;
	}

	.signIn {
		font-size: 36rpx;
		color: #DB5A0A;
		font-weight: bold;
		position: absolute;
		left: 45%;
		top: -60rpx;
		transform: translateX(-50%);
		opacity: 0;
		transition: 0.5s;
		display: flex;
		align-items: center;

		.mifenPic {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}

		&.active {
			top: -100rpx;
			opacity: 1;
		}

	}
</style>